<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useResumeStore } from '../stores/resumeStore';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

const router = useRouter();
const resumeStore = useResumeStore();
const loading = ref(false);
const resumes = ref(resumeStore.resumes);

onMounted(async () => {
  try {
    loading.value = true;
    await resumeStore.fetchResumes();
    resumes.value = resumeStore.resumes;
  } catch (error) {
    console.error('获取简历列表失败:', error);
    message.error('获取简历列表失败');
  } finally {
    loading.value = false;
  }
});

const createNewResume = async () => {
  try {
    loading.value = true;
    const newResume = await resumeStore.createResume({
      name: '新建简历'
    });
    router.push(`/resume/edit/${newResume.id}`);
  } catch (error) {
    console.error('创建简历失败:', error);
    message.error('创建简历失败');
  } finally {
    loading.value = false;
  }
};

const editResume = (id: string) => {
  router.push(`/resume/edit/${id}`);
};

const previewResume = (id: string) => {
  router.push(`/resume/preview/${id}`);
};

const confirmDelete = (id: string, resumeName: string) => {
  Modal.confirm({
    title: '确认删除',
    icon: () => h(ExclamationCircleOutlined),
    content: `确定要删除「${resumeName}」吗？此操作不可恢复。`,
    okText: '删除',
    okType: 'danger',
    cancelText: '取消',
    async onOk() {
      try {
        await resumeStore.deleteResume(id);
        resumes.value = resumeStore.resumes;
        message.success('删除成功');
      } catch (error) {
        console.error('删除简历失败:', error);
        message.error('删除简历失败');
      }
    },
  });
};

const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};
</script>

<template>
  <div class="resume-list-container">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">我的简历</h1>
      <a-button type="primary" @click="createNewResume" :loading="loading">
        <template #icon><PlusOutlined /></template>
        创建新简历
      </a-button>
    </div>

    <a-spin :spinning="loading">
      <!-- 空状态 -->
      <div v-if="resumes.length === 0" class="empty-state bg-white dark:bg-gray-800 rounded-lg shadow p-8 text-center">
        <InboxOutlined class="text-5xl text-gray-400 mb-4" />
        <h2 class="text-xl font-medium mb-2">暂无简历</h2>
        <p class="text-gray-500 mb-4">创建您的第一份简历，开始您的求职之旅</p>
        <a-button type="primary" @click="createNewResume">
          <template #icon><PlusOutlined /></template>
          创建新简历
        </a-button>
      </div>

      <!-- 简历列表 -->
      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <a-card v-for="resume in resumes" :key="resume.id" class="resume-card hover:shadow-lg transition-shadow">
          <template #cover>
            <div class="resume-card-cover bg-gray-100 dark:bg-gray-700 h-40 flex items-center justify-center">
              <FileTextOutlined class="text-5xl text-gray-400" />
            </div>
          </template>
          <a-card-meta :title="resume.name">
            <template #description>
              <div class="text-sm text-gray-500">
                <p>创建时间: {{ formatDate(resume.createdAt) }}</p>
                <p>最后更新: {{ formatDate(resume.updatedAt) }}</p>
              </div>
            </template>
          </a-card-meta>
          <div class="flex justify-end mt-4 space-x-2">
            <a-button type="text" @click="previewResume(resume.id)">
              <template #icon><EyeOutlined /></template>
              预览
            </a-button>
            <a-button type="text" @click="editResume(resume.id)">
              <template #icon><EditOutlined /></template>
              编辑
            </a-button>
            <a-button type="text" danger @click="confirmDelete(resume.id, resume.name)">
              <template #icon><DeleteOutlined /></template>
              删除
            </a-button>
          </div>
        </a-card>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts">
import { h } from 'vue';
import { PlusOutlined, InboxOutlined, FileTextOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';

export default {
  components: {
    PlusOutlined,
    InboxOutlined,
    FileTextOutlined,
    EyeOutlined,
    EditOutlined,
    DeleteOutlined,
    ExclamationCircleOutlined
  }
};
</script>

<style scoped>
.resume-list-container {
  max-width: 1200px;
  margin: 0 auto;
}

.resume-card {
  transition: all 0.3s;
}

.resume-card:hover {
  transform: translateY(-5px);
}
</style>